{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}客户列表{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        th {
            text-align: center;
        }

        td {
            text-align: center;
        }


        .flex-container {
            display: flex;
            justify-content: space-between; /* 或者使用 flex-start, 根据需要调整 */
            align-items: center; /* 垂直居中，可选 */

        }

        .flex-item {
            /* 你可能不需要为flex-item设置特定的样式，这取决于你的具体需求 */
            /* 例如，如果你想要标签和输入框之间有更多空间，你可以给flex-item添加margin */
            margin-right: 3px; /* 右侧间距 */
        }

        .customer-list {
            /* 这里可以添加额外的样式，比如 margin-right 来增加间距 */
        }

        .color-radio label {
            margin-left: 0;
            padding-left: 0;
        }

        .color-radio input[type="radio"] {
            display: none;
        }

        .color-radio input[type="radio"] + .cycle {
            display: inline-block;
            height: 22px;
            width: 22px;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }

        .color-radio input[type="radio"]:checked + .cycle {
            border: 2px solid black;
        }

        #id_big_project{
            width: 20px;
            height: 20px;
        }


    </style>
{% endblock %}

{% block content %}
    <div class="container">

        <div class="panel panel-info">
            <!-- Default panel contents -->
            <div class="panel-heading flex-container">
                <div class="customer-list flex-item">
                    <i class="fa fa-list" aria-hidden="true"> 客户列表</i>
                </div>
                <form id="search_form" method="get" class="form-inline flex-item">
                    <div class="form-group ">
                        <input type="text" name="q" class="form-control" placeholder="客户名称&别名关键字"
                               style="height: 23px;width: 180px" id="search_q"
                               value="{{ search_data }}">
                    </div>


                    <button class="btn btn-primary btn-xs" type="submit">
                        <i class="fa fa-search" aria-hidden="true"> 搜索</i>
                    </button>
                    <button onclick='clearSearch_p()' class="btn btn-primary btn-xs" type="button">
                        <i class="fa fa-undo" aria-hidden="true"> 重置</i>
                    </button>


                </form>

            </div>


            <div class="panel-body">
                <p style="color: red">说明：如搜索无结果，请联系区域经理新增客户信息！</p>
            </div>

            <!-- Table -->
            <table class="table table-hover table-bordered table-condensed">
                <thead>
                <tr style="color: #2aabd2">
                    <th>ID</th>
                    <th>创建日期</th>
                    <th>所属区域</th>
                    <th>客户名称</th>
                    <th>备注&别名</th>
                    <th>创建项目</th>
                </tr>
                </thead>

                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.create_date }}</td>
                        <td>{{ obj.get_RO_display }}</td>
                        <td>{{ obj.name }}</td>

                        <td>

                            <a href="#" id="{{ obj.id }}" class="info">查看别名</a>
                        </td>

                        <td>
                            <button c_id="{{ obj.id }}" c_name="{{ obj.name }}" type="button"
                                    class="btn btn-xs btn-success btn-add">
                                <i class="fa fa-plus" aria-hidden="true"> New Project</i>
                            </button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>

            <!-- 别名模态框 -->
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">备注&别名</h4>
                        </div>
                        <div class="modal-body">
                            <p id="notes"></p>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="row">
            <div class="col-md-8">
                <ul class="pagination">
                    {{ page_string }}
                </ul>
            </div>
            <div class="col-md-4" style="text-align: right; color: #2aabd2; font-size: 16px; line-height: 75px">
                总计：{{ count }}
            </div>
        </div>


    </div>

    <!-- Modal 增加项目-->
    <div class="modal fade" id="addProjectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <div class="alert alert-info fade in" role="alert">
                        <h3 id="alert_info">占位字符</h3>
                        <p style="margin: 10px 0;">请确认选择客户是否正确！！！</p>
                    </div>
                </div>
                <div class="modal-body">
                    <form id="form1" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            {% if field.name == 'desc' %}
                                <div class="row">
                                    <div class="form-group" style="margin-left: 10px; margin-right: 10px">
                                        <div class="col-md-12" style="position: relative; margin-bottom: 20px">
                                            <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                            <div class="row clearfix">
                                                <div id="editor-textarea" class="col-md-12">
                                                    {{ field }}
                                                    <!--
                                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                                    -->
                                                    <span class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <div class="form-group">
                                    <div class="col-md-3" style="position: relative; margin-bottom: 15px">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                        {{ field }}
                                        <span class="error-msg"></span>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>




{% endblock %}

{% block js %}
    <script>
        var C_ID;
        var C_NAME;

        $(function () {
            bindShowNotes();
            // 添加项目事件，打开模态框
            bindBtnAddProject();
            // 增加项目模态框保存提交
            bindBtnSaveProject();
            // 判断大项目
            bindShowBigProject()

        })

        function bindShowNotes() {
            $('.info').click(function () {
                C_ID = $(this).attr('id');
                console.log(C_ID);
                $('#myModal').modal('show');
                $.ajax({
                    url: '/customer/' + C_ID + '/detail/',
                    type: 'get',
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            console.log(res.info);
                            $('#notes').text(res.info.notes);
                        } else {
                            alert(res.error);
                        }
                    }
                })

            })
        }

        // 重置搜索
        function clearSearch_p() {
            $('#search_q').val('');
        }

        // 新增项目打开模态框
        function bindBtnAddProject() {
            $('.btn-add').click(function () {
                C_ID = $(this).attr('c_id');
                C_NAME = $(this).attr('c_name');
                console.log('选中的客户id是：' + C_ID);
                console.log('选中的客户名称是：' + C_NAME);
                $('#alert_info').text('正在对客户：' + C_NAME + ' 创建新项目')
                $('#form1')[0].reset();
                $('#id_value').prop('readonly', true);
                $('.error-msg').empty();
                $('#addProjectModal').modal('show');
            })
        }

        function bindShowBigProject() {
            let getBigProject = document.getElementById('id_big_project');
            let getValue = document.getElementById('id_value');
            getValue.setAttribute('readOnly', true);
            getBigProject.onchange = function () {
                // checked 属性是专门用于 <input> 元素（如复选框 <input type="checkbox"> 和单选按钮 <input type="radio">）的，以检查该元素是否被选中。
                // console.log('是否大项目：' + (getBigProject.checked));
                console.log('是否大项目：' + (getBigProject.checked? '是' : '否'));
                if(getBigProject.checked){
                    // prop是jQuery方法
                    // prop('readonly', true);
                    // 这里使用原生 JavaScript 的 removeAttribute 和 setAttribute
                    getValue.removeAttribute('readOnly');
                }else {
                    getValue.value = 0;
                    // getValue.prop('readonly', false);
                    getValue.setAttribute('readOnly', true);
                }
            }
        }

        // 增加项目模态框保存提交
        function bindBtnSaveProject() {
            $('#btnSubmit').click(function () {
                // 因为要对选中的客户创建project，客户的id在form1表单外
                // 如果直接使用 data: $('#form1').serialize(), 没有包含 选中客户的id
                // 这里使用 new FormData 来额外增加 客户id
                var formData = new FormData($('#form1')[0]); // 注意这里传入的是 DOM 元素，不是 jQuery 对象
                formData.append('customer_id', C_ID); // 添加额外的数据
                $.ajax({
                    url: '{% url 'customer_add_project' %}',
                    type: 'post',
                    data: formData,
                    processData: false,  // 告诉jQuery不要处理发送的数据（因为FormData对象不需要）
                    contentType: false,  // 告诉jQuery不要设置内容类型头（浏览器会自动设置正确的头）
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            alert(res.info);
                            $('#addProjectModal').modal('hide');
                            location.reload();
                        } else {
                            console.log(res.error);
                            $.each(res.error, function (key, value) {
                                console.log(key + '......' + value);
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })

            })

        }

    </script>

{% endblock %}